<template>
    <el-row>
        <el-col :span="24" style="padding: 24px;">
            <el-button icon="Plus" @click="createCommodity" type="primary">新建</el-button>
            <el-button icon="Refresh" @click="getList">刷新列表</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="padding:12px; min-height: 400px; height: 70vh;">
            <el-table v-loading="loading" :data="dataList" style="width: 80%; min-width: 600px; height: 100%;">
                <!---
                <el-table-column label="图片" align="center" width="120">
                    <template #default="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.coverUri"
                            :preview-src-list="[scope.row.coverUri]" fit="cover" v-if="scope.row.coverUri">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                        <div v-else class="empty-image">
                            <el-icon>
                                <Picture />
                            </el-icon>
                        </div>
                    </template>
                </el-table-column>
                -->
                <el-table-column label="名称" align="center" prop="name"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.enabled ? 'success' : 'danger'">
                            {{ scope.row.enabled ? '启用' : '停用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="类别" align="center">
                    <template #default="scope">
                        {{ scope.row.category?.name || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="单位" align="center">
                    <template #default="scope">
                        {{ scope.row.unit?.name || '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-link :underline="false" type="primary" @click="showDetailPage(scope.row)">
                            详情
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <div style="width: 80%; min-width: 600px; margin: 0 auto; padding: 0;">
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>

import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import { CommodityUiAction } from '../../../public/engine/uiAction/commodityUiAction'
import { Definition } from '../../../public/engine/common/definition'
import { DataPage } from '../../../public/network/communicationConverter'
import { useRouter } from 'vue-router'
import  EventBus  from '../../../public/engine/ipc/eventBus'
import { uiNavigation } from '../../../public/views/uiEntrance/uiNavigation'

export default {
    name: 'commodities',

    components: {
        Picture
    },
    data() {
        return {
            total: 0,
            loading: false,
            queryParams: {
                pageNum: 1,
                pageSize: Definition.gDefualPageSize,
            },
            dataList: [],
            commodityUiAction: new CommodityUiAction(),
            router: useRouter(),
        }
    },
    methods: {
        async getList() {
            try {
                this.loading = true
                const res = await this.commodityUiAction.getCommodityList(
                    new DataPage(this.queryParams.pageNum, 0, this.queryParams.pageSize),
                    false
                )

                if (res && res.data && res.data.dataList) {
                    this.dataList = res.data.dataList
                    this.total = res.data.pageInfo.total
                } else if (res.resErr) {
                    ElMessage.error('获取列表失败')
                }
            } catch (error) {
                console.error('获取列表失败', error)
                ElMessage.error('获取列表失败')
            } finally {
                this.loading = false
            }
        },

        // 新建commodity
        createCommodity() {
           
            uiNavigation.showCommodityDetailPage(this.router, {           
                type: 'create'
            })
        },

        showDetailPage(commodity) {
            // 添加跳转页面信息 vue web 页面跳转
            console.log('跳转商品详情页面', commodity)
            // 跳转带查询参数
            /*
            this.router.push({
                path: '/basicData/commodityMgt/commodity',
                query: {
                    id: commodity.id, // 商品ID
                    type: 'detail' // 其他参数
                }
            })
                */

            uiNavigation.showCommodityDetailPage(this.router, {
                id: commodity.id,
                type: 'detail'
            })
        },

        // 商品更新
        handleCommodityUpdated() {
            // 处理商品更新逻辑
            this.getList();
        },
    },
    mounted() {        
        this.getList()
        EventBus.on('commodityUpdated', this.handleCommodityUpdated)
    },

    beforeUnmount() {        
        EventBus.off('commodityUpdated', this.handleCommodityUpdated)
    }
}
</script>